<template>
    <div>
   <h1>居民信息录入</h1>
   <table class="table">
    <thead>
        <tr>
            <td>姓名</td>
            <td>
               <input type="text" v-model="data.name">
            </td>
        </tr>
       
       
         <tr>
            <td>性别</td>
            <td>
                   <input type="checkbox" v-model="data.sex">选中为男，不选中为女
            </td>
        </tr>
          <tr>
            <td>身份证</td>
            <td>
              <input type="text" v-model="data.staffCard">
            </td>
        </tr>
         <tr>
            <td>手机号</td>
            <td>
              <input type="text" v-model="data.phone">
            </td>
        </tr>
       
          <tr>
            <td>类型</td>
            <td>
                 <select v-model="data.staffTypeId">
                    <option value="0">请选择</option>
                    <option v-for="b in qwert" :value="b.staffTypeId">{{ b.name }}</option>
                 </select>
            </td>
        </tr>
         <tr>
            <td>管理小区</td>
            <td>
              <input type="text" v-model="data.addr">
            </td>
        </tr>
       
         <tr>
       
            <td colspan="2">
               <input type="button" value="添加" @click="Add">
            </td>
        </tr>
    </thead>
   </table>
    </div>
</template>

<script setup lang="ts">
import {ref,onMounted} from "vue"
import axios from "axios";
const data=ref({
     "id": 0,
  "name": "",
  "sex": true,
  "staffCard": "",
  "phone": "",
  "staffTypeId": 0,
  "addr": ""
})
onMounted(()=>{
    Xiala()
})
const qwert=ref([{
     "staffTypeId": 1,
    "name": "项目经理"
}])
const Xiala=()=>{
  axios.get("https://localhost:7134/api/Staff/Xialak").then(res=>{
    qwert.value=res.data
  })
}
const Add=()=>{
    debugger
    if(data.value.name==""){
        alert('姓名不能为空');
        return;
    }
     if(data.value.staffCard==""){
        alert('身份证号不能为空');
        return;
    }
     if(data.value.phone==""){
        alert('手机号不能为空');
        return;
    }
     if(data.value.staffTypeId==0){
        alert('职员类型不能为空');
        return;
    }
     if(data.value.addr==""){
        alert('管理小区不能为空');
        return;
    }
    if(data.value.staffCard.length!=18){
        alert('身份证号不是18位');
        return;
    }
    var ph=/^1[3-9]\d{9}$/
    if(!ph.test(data.value.phone)){
        alert('手机号格式不正确');
        return;
    }
    axios.post("https://localhost:7134/api/Staff/AddStaff",data.value).then(res=>{
        if(res.data>0){
            alert('添加成功');
            location.href='/ShowStaffView';
        }
        else{
            alert('添加失败');
        }
    })
}

</script>

<style scoped>

</style>